// row  和Column  行布局和列布局 用法 基本相同 除了方向不同,

//row行布局 就是 多个 widget 可以显示在同一个行中

// 如果 文本过长 可以使用Expanded 实现text自动换行也可以实现宽高按比例布局
//flex这个参数，在构造方法中这个参数的默认值是“1”，也就是这个Expanded内部child所占row（Column、Flex）的比例是1/N,
// 这个N是布局中每个孩子flex属性的总和。

import 'package:flutter/material.dart';

class MyRowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return Scaffold(
      appBar: AppBar(
        title: Text('row 布局'),
      ),
//      body: Row(
//        children: <Widget>[
//          Text('第一个Text第一个Text第一个Text第一个Text第一个Text'),
//          Text('??第二个Text第二个Text第二个Text第二个Text第二个Text第二个Text'),
//          Text('!!!第三个Text第三个Text第三个Text第三个Text第三个Text第三个Text第三个Text'),
//        ],
//      ),
      //文本过长 使用Text会有警告 可以使用Expanded 替代 会自动换行,并且该行都是均分的
      body: Row(
        children: <Widget>[
          Expanded(
              child: Text(
                  '第一个text第一个text第一个text第一个text第一个text第一个text第一个text第一个text第一个text')),
          Expanded(
            child: Text('P<()第二个text第二个text第二个text第二个text第二个text第二个text'),
            flex: 2,
          ),
          Expanded(
              child: Text(
                  '~~~~第三个text第三个text第三个text第三个text第三个text第三个text第三个text')),
        ],
      ),
    );
  }
}

//练习
class MyRowPractice extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return new Scaffold(
      appBar: AppBar(
        title: Text('layout'),
      ),
      body: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(10.0),
            decoration: BoxDecoration(
              //箱描述
              border: Border(
                //四周边
                bottom: BorderSide(color: Colors.grey),
              ),
            ),
            child: Row(
              children: <Widget>[
                Icon(
                  Icons.message,
                  color: Colors.blue,
                ),
                Expanded(
                  child: Text(
                    '消息记录',
                    style: TextStyle(color: Colors.black, fontSize: 20.0),
                    textAlign: TextAlign.end, //文字位置
                  ),
                ),
              ],
            ),
          ),
          Container(
            padding: EdgeInsets.all(10.0),
            decoration: BoxDecoration(
                border: Border(bottom: BorderSide(color: Colors.grey))),
            child: Row(
              children: <Widget>[
                Icon(
                  Icons.search,
                  color: Colors.blue,
                ),
                Expanded(
                  child: Text(
                    '搜索记录',
                    textAlign: TextAlign.end,
                    style: TextStyle(fontSize: 20.0, color: Colors.black),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
